<script lang="ts" setup>
import { reactive, onMounted } from 'vue'

// do not use same name with ref
const formData = reactive({
    form: [{
        id:1,
        pl: '',
        cs: '',
    }]
})

import { ref } from 'vue'

const checkList = ref(['Value B', 'Value A'])

const onSubmit = () => {
    console.log('submit!')
}

import axios from 'axios'
import { ElMessage } from 'element-plus';
const getYxpz = () => {
    //参考接口文档，请求用户数据
    axios.get("/api/u/youXiPeiZhi/").then((response) => {
        console.log(response, "网站信息数据reponse")
        //更新用户数据
        formData.form = response.data
        // console.log(formData.form, "接收网站信息数据")
    })
}

onMounted(() => {
    const savedValues = localStorage.getItem('checkedValues');
    if (savedValues) {
        checkList.value = JSON.parse(savedValues);
    }
    getYxpz()
})

const updateYxpz = () => {
    localStorage.setItem('checkedValues', JSON.stringify(checkList.value));
    // console.log(formData.form, "<-----1111修改网站信息数据")
    axios.patch("/api/u/youXiPeiZhi/1/",
        formData.form[0],
        { headers: { "Content-Type": "application/json" } }   //
    ).then((response) => {
        console.log(response, "<-----修改网站信息数据")
        // 更新用户数据
        // formData.form = response.data
        ElMessage({
            type: "success",
            message: "信息保存成功"
        })
    })

}


</script>


<template>
    <el-form :model="formData" label-width="auto" style="max-width: 800px">
        <div class="zs">
            <h3>系统干预：人为控制游戏结果，保证平台收益</h3>
            <h3>当进行系统干预时：</h3>
            <h3>普通游戏：总是下注金额最少的位置获胜</h3>
            <h3>不进行系统干预时：</h3>
            <h3>游戏结果完全随机</h3>
        </div>
        <el-form-item label="游戏开关">
            <div class="a">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="智勇三张" value="Value A" />
                    <el-checkbox label="转盘" value="Value B" />
                </el-checkbox-group>
            </div>
        </el-form-item>
        <el-form-item label="普通游戏赔率">
            <el-input v-model="formData.form[0].pl" />
            <h3>%游戏结果不进行系统干预的概率，0表示完全进行系统干预，平台绝对不会赔，100表示完全随机</h3>
        </el-form-item>
        <el-form-item label="游戏抽水">
            <el-input v-model="formData.form[0].cs" />
            <h3>%用户获胜后，去除本金部分的抽成比例</h3>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updateYxpz">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.el-form-item h3 {
    color: #999;
    font-size: 14px;
}

.el-button {
    margin-left: 108px;
}

.zs {
    color: #e70606;
    font-size: 13px;
    margin-top: -30px;
    margin-bottom: 30px;
}

.a {
    display: flex;
    font-size: 16px;
    margin-top: 2px;
    color: #999;
}
</style>
